<!DOCTYPE html>
<!--[if IE 9]>         <html class="no-js lt-ie10" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <title>数字币对冲平台|BDS虚拟币对冲平台</title>
 		<#include "../static/top.ftl" >

</head>
<body>
<!-- Page Wrapper -->
<!-- In the PHP version you can set the following options from inc/config file -->
<!--
    Available classes:

    'page-loading'      enables page preloader
-->
<div id="page-wrapper" class="page-loading">
    <!-- Preloader -->
    <!-- Preloader functionality (initialized in js/app.js) - pageLoading() -->
    <!-- Used only if page preloader enabled from inc/config (PHP version) or the class 'page-loading' is added in #page-wrapper element (HTML version) -->
    <div class="preloader">
        <div class="inner">
            <!-- Animation spinner for all modern browsers -->
            <div class="preloader-spinner themed-background hidden-lt-ie10"></div>

            <!-- Text for IE9 -->
            <h3 class="text-primary visible-lt-ie10"><strong>Loading..</strong></h3>
        </div>
    </div>

    <div id="page-container" class="header-fixed-top sidebar-visible-lg-full sidebar-light">
        <!-- Alternative Sidebar -->

        <!-- END Alternative Sidebar -->

        <!-- Main Sidebar -->



                <#include "../static/menu.ftl" >


        <!-- END Main Sidebar -->

        <!-- Main Container -->
        <div id="main-container">
            <!-- Header -->



           <#include "../static/header.ftl" >
            <!-- END Header -->

            <!-- Page content -->
            <div id="page-content">
                <!-- Validation Header -->
                <div class="content-header">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="header-section">
                                <h1>交易</h1>
                            </div>
                        </div>
                        <div class="col-sm-6 hidden-xs">
                            <div class="header-section">
                                <ul class="breadcrumb breadcrumb-top">
                                    <li>User Interface</li>
                                    <li>Forms</li>
                                    <li><a href="">Validation</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Validation Header -->

             
                <div class="row">
                  

                <!--买入/卖出选择框 -->
                 <div class="row">
                    
                    <div class="col-sm-12  col-md-8">
                        <!-- Form Validation Block -->
                        <div class="block">
                            <div class="block-title">
                                <h2>买入</h2>
                            </div>
                            <div class="row">
                            
                            
                           
                        	<div class="col-md-5">
	                            <form id="form-set-api" method="post" class="form-horizontal form-bordered">
	                            
	                     
	                              <div class="form-group pull-right">
	                                   
	                                    <div class="col-md-6">
	                                       <select id="select_exchange" name="api_exchange" class="form-control" style="width:200px">
		                               	   		<option value="">请选择</option>
		                            	   </select>
	                                    </div>
                                     
	                                    <div class="col-md-6">
	                                     <select id="select_pair" name="api_exchange" class="form-control" style="width:200px">
		                            	 </select>
	                                    </div>
                                    </div>
                                  
                                      
	                                <div class="form-group pull-right">
	                                  
	                                    <div class="col-md-12">
                                             <label class="radio-inline" for="example-inline-radio1">
                                                 <input type="radio" id="example-inline-radio1" name="example-inline-radios" value="option1"> 买一
                                             </label>
                                             <label class="radio-inline" for="example-inline-radio2">
                                                 <input type="radio" id="example-inline-radio2" name="example-inline-radios" value="option2"> 买二
                                             </label>
                                             <label class="radio-inline" for="example-inline-radio3">
                                                 <input type="radio" id="example-inline-radio3" name="example-inline-radios" value="option3"> 买三
                                             </label>
                                         </div>
                                    </div>
                                    
	                                <div class="form-group">
	                                  
	                                    <div class="col-md-8 pull-right">
	                                        <input type="number" id="access_key" name="access-key" class="form-control" placeholder="">
	                                    </div>
                                        <label class="col-md-1 control-label quote_symbol"></label>
                                    </div>
	                                <div class="form-group">
	                                  
	                                    <div class="col-md-8 pull-right">
	                                        <input type="number" id="secret_key" name="secret-key" class="form-control" placeholder="">
	                                    </div>
                                        <label class="col-md-1 control-label base_symbol"></label>
                                    </div>
                                  
	                               
	                            </form>
                            
                            </div>
                            <div class="col-md-2">
	                            <form id="form-set-mid" method="post" class="form-horizontal form-bordered">
		                             <div class="form-group">
		                                    <label class="col-md-12 control-label" style="text-align: center" for="access-key">交易所/币对</label>
	                                 </div>  
	                                 <div class="form-group">
		                                    <label class="col-md-12 control-label"  style="text-align: center" for="access-key">买/卖</label>
	                                 </div>
	                                 <div class="form-group">
		                                    <label class="col-md-12 control-label"  style="text-align: center" for="access-key">委托价</label>
	                                 </div>
	                                 <div class="form-group">
		                                    <label class="col-md-12 control-label"  style="text-align: center" for="access-key">数量</label>
	                                 </div>
	                                  
		                        </form>
                            </div>
                            <div class="col-md-5">
	                            <form id="form-set-api" method="post" class="form-horizontal form-bordered">
	                             <div class="form-group pull-left" >
	                                   
	                                    <div class="col-md-6">
	                                       <select id="select_exchange" name="api_exchange" class="form-control" style="width:200px">
		                               	   		<option value="">请选择</option>
		                            	   </select>
	                                    </div>
                                     
	                                    <div class="col-md-6">
	                                     <select id="select_pair" name="api_exchange" class="form-control" style="width:200px">
		                            	 </select>
	                                    </div>
                                    </div>
                                     <div class="form-group pull-left">
	                                  
	                                    
	                                    <div class="col-md-12">
                                             <label class="radio-inline" for="example-inline-radio1">
                                                 <input type="radio" id="example-inline-radio1" name="example-inline-radios1" value="option1"> 卖一
                                             </label>
                                             <label class="radio-inline" for="example-inline-radio2">
                                                 <input type="radio" id="example-inline-radio2" name="example-inline-radios1" value="option2"> 卖二
                                             </label>
                                             <label class="radio-inline" for="example-inline-radio3">
                                                 <input type="radio" id="example-inline-radio3" name="example-inline-radios1" value="option3"> 卖三
                                             </label>
                                         </div>
                                    </div>
	                                <div class="form-group">
	                                  
	                                    <div class="col-md-8 pull-left">
	                                        <input type="number" id="access_key" name="access-key" class="form-control"
	                                               placeholder="">
	                                    </div>
                                        <label class="col-md-1 control-label quote_symbol"></label>
                                    </div>
	                                <div class="form-group">
	                                  
	                                    <div class="col-md-8 pull-left">
	                                        <input type="number" id="secret_key" name="secret-key" class="form-control"
	                                               placeholder="">
	                                    </div>
                                        <label class="col-md-1 control-label base_symbol"></label>
                                    </div>
                                   
	                                
	                            </form>
                           </div>
                            </div>
                            <div class="row">
                            <div class="col-md-12">
                            	<table id="general-table" class="table table-striped table-bordered table-vcenter">
	                                    <thead>
	                                        <tr>
	                                        	<th>可用资产</th>
	                                            <th>金额</th>
	                                            <th>手续费</th>
	                                            <th>利润</th>
	                                            
	                                          
	                                        </tr>
	                                    </thead>
	                                    <tbody>
	                                        <tr>
	                                            <td class="text-center">20000</td>
	                                            <td>1008</td>
	                                            <td>40</td>
	                                            <td>940</td>
	                                        </tr>
	                                        
	                                    </tbody>
                               	  </table>
                            
                            </div>
                            
                            <div  class="col-md-12">
                            	<center>
                            		<button type="button" class="btn btn-danger center-block">确认搬砖</button>
                            	</center>
                            </div>
                            </div>
                        </div>
                        <!-- END Form Validation Block -->
                    </div>
 					<div class="col-sm-12  col-md-4">
 					  <div class="block">
                            <div class="block-title">
                                <h2>搬砖交易记录</h2>
                            </div>  
 						<div class="table-responsive">
						<table class="table table-striped table-borderless table-vcenter" style="margin-top: -15px;">
                                <thead>
                                    <tr >
                                        <th>档位</th>
                                        <th>价格</th>
                                        <th>数量</th>
                                        <th>总计</th>
                                    </tr>
                                </thead>
                                <tbody>
                              
                                    <tr >
                                        <td style="color:#008069">卖一</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>
                                    <tr >
                                        <td  style="color:#008069">卖二</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>
                                    <tr>
                                        <td  style="color:#008069">卖三</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>
                                     <tr>
                                        <td  style="color:#008069">卖三</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>
                                     <tr>
                                        <td  style="color:#008069">卖三</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>
                                     <tr>
                                        <td  style="color:#008069">卖三</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>
                                     <tr>
                                        <td  style="color:#008069">卖三</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>
                                     <tr>
                                        <td  style="color:#008069">卖三</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>
                                     <tr>
                                        <td  style="color:#008069">卖三</td>
                                        <td>0.566</td>
                                        <td>3</td>
                                        <td >1.5</td>
                                    </tr>
                                </tbody>
                            </table>
                            </div>
 					
 					</div>
                    
                    </div>

                </div>
             
             
 				<div class="row">
                    
                    <div class="col-sm-12  col-md-6">
                        <!-- Form Validation Block -->
                        <div class="block">
                            <div class="block-title">
                                <h2>最新卖出价格</h2>
                            </div>  
                        	<div class="table-responsive">
                                <table class="table table-striped table-borderless table-vcenter">
                                    <thead>
                                        <tr>
                                            <th>档位</th>
                                            <th>价格</th>
                                            <th>数量</th>
                                            <th>总计</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                  
                                        <tr >
                                            <td style="color:#008069">卖一</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        <tr >
                                            <td  style="color:#008069">卖二</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        <tr>
                                            <td  style="color:#008069">卖三</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        
                                    </tbody>
                                </table>
                            </div>    
                            <div class="table-responsive">
                                <table class="table table-striped table-borderless table-vcenter">
                                    <thead>
                                        <tr>
                                            <th>档位</th>
                                            <th>价格</th>
                                            <th>数量</th>
                                            <th>总计</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                  
                                        <tr >
                                            <td style="color:#d45858">买一</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        <tr >
                                            <td  style="color:#d45858">买二</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        <tr>
                                            <td  style="color:#d45858">买三</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        
                                    </tbody>
                                </table>
                            </div>    
                            
                        </div>
                </div>           
             
             <div class="col-sm-12  col-md-6">
                        <!-- Form Validation Block -->
                        <div class="block">
                            <div class="block-title">
                                <h2>最新买出价格</h2>
                            </div>  
                        <div class="table-responsive">
                                <table class="table table-striped table-borderless table-vcenter">
                                    <thead>
                                        <tr>
                                            <th>档位</th>
                                            <th>价格</th>
                                            <th>数量</th>
                                            <th>总计</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                  
                                        <tr >
                                            <td style="color:#d45858">买一</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        <tr >
                                            <td  style="color:#d45858">买二</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        <tr>
                                            <td  style="color:#d45858">买三</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        
                                    </tbody>
                                </table>
                            </div>    
                            <div class="table-responsive">
                                <table class="table table-striped table-borderless table-vcenter">
                                    <thead>
                                        <tr>
                                            <th>档位</th>
                                            <th>价格</th>
                                            <th>数量</th>
                                            <th>总计</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                  
                                        <tr >
                                            <td style="color:#008069">卖一</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        <tr >
                                            <td  style="color:#008069">卖二</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        <tr>
                                            <td  style="color:#008069">卖三</td>
                                            <td>0.566</td>
                                            <td>3</td>
                                            <td >1.5</td>
                                        </tr>
                                        
                                    </tbody>
                                </table>
                            </div>
                            
                        </div>
                </div>      
             
             
             
            </div>
            <!-- END Page Container -->
        </div>
        <!-- END Page Wrapper -->


        <script>

            $(function () {
                initExchange();
            });


            function initExchange(){
                $.get("/exchange/list",function (data) {
                    var list=data.data;
                    var html="";
                    for (var i = 0; i <list.length; i++) {
                        html+="<option value="+list[i]+">"+list[i]+"</option>"
                    }
                    $("#select_exchange").append(html);
                });
            };


            $("#select_exchange").change(function () {
                var exchange=$("#select_exchange").val();
                initPairs(exchange);
            });


            function initPairs(exchange){
                $.get("/exchange/pairs", {exchange:exchange}, function (data) {
                    $("#select_pair").empty();
                    var list=data.data;
                    var html="<option>请选择</option>";
                    for (var i = 0; i <list.length; i++) {
                        html+="<option value="+list[i]+">"+list[i]+"</option>"
                    }
                    $("#select_pair").append(html);
                });
            };


            $("#select_pair").change(function () {
                var pair=$("#select_pair").val().toUpperCase();
                var array=pair.split("_");
                var base=array[0];
                var quote=array[1];
                $(".base_symbol").text(base);
                $(".quote_symbol").text(quote);
            });


            $(".buy_input").change(function () {
                var buy_price=$(".buy_input")[0].value;
                var buy_amount=$(".buy_input")[1].value;
                console.log("buy_price!!"+buy_price);
                console.log("buy_amount!!"+buy_amount);
                $("#buy_total").text(buy_price*buy_amount);
            });

            $(".sell_input").change(function () {
                var buy_price=$(".sell_input")[0].value;
                var buy_amount=$(".sell_input")[1].value;
                console.log("buy_price!!"+buy_price);
                console.log("buy_amount!!"+buy_amount);
                $("#sell_total").text(buy_price*buy_amount);
            });


            $("#submit_keys").click(function () {
                        var access_key=$("#access_key").val();
                        var secret_key=$("#secret_key").val();
                        if(access_key==""||secret_key=="") {
                            alert("请填写完整信息！")
                        }else{
                            var params={
                                access_key:access_key,
                                secret_key:secret_key
                            };
                            // $.post("/",params,function(data){
                            //     alert(data.msg);
                            // });
                        }
                    }
            );

        </script>
</body>
</html>